<!--
 * @Description:键盘keyCode卡顿解决
 * @Author: Sun
 * @Date: 2019-07-01 20:05:50
 * @LastEditors: Sun
 * @LastEditTime: 2019-07-09 06:53:50
 -->
<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<title>键盘keyCode卡顿解决</title>
	<style type="text/css">
		#div1 {
			width: 100px;
			height: 100px;
			background: #ccc;
			position: absolute;
			;

		}
	</style>

</head>

<body>
	<div id="div1"></div>
	<script type="text/javascript">
		var oDiv = document.getElementById('div1');
		var left = false;
		var right = false;
		var up = false;
		var dw = false;
		setInterval(function () {
			if (left) {
				console.log(oDiv)
				oDiv.style.left = oDiv.offsetLeft - 5 + 'px';
			} else if (up) {
				oDiv.style.top = oDiv.offsetTop - 5 + 'px';
			} else if (right) {
				console.log(oDiv);
				oDiv.style.left = oDiv.offsetLeft + 5 + 'px';

			} else if (dw) {
				oDiv.style.top = oDiv.offsetTop + 10 + 'px';
			}
		}, 100)

		document.onkeydown = function (ev) {
			var ev = ev || event;
			var code = ev.keyCode;
			switch (code) {
				case 37:
					left = true;
					break;
				case 38:
					up = true;
					break;
				case 39:
					right = true;
					break;
				case 40:
					dw = true;
					break;
			}
		}

		document.onkeyup = function (ev) {
			var ev = ev || event;
			var code = ev.keyCode;
			switch (code) {
				case 37:
					left = false;
					break;
				case 38:
					up = false;
					break;
				case 39:
					right = false;
					break;
				case 40:
					dw = false;
					break;
			}

		}
	</script>
</body>

</html>